<template>
  <view>
    <view class="nav-bar">
      <uni-nav-bar
        title="护士上门"
        backgroundColor="transparent"
        :shadow="false"
        :border="false"
        :statusBar="true"
        color="white"></uni-nav-bar>
    </view>
    <view class="tab-card">
      <view class="card-item">
        <view class="left-col">
          <image src="../../static/home_icon_income.png" class="icon"></image>
          <view class="title">总收入</view>
          <view class="value">{{ dateTotalInfo.totalRevenue }}</view>
        </view>
        <image
          src="../../static/home_ipic_income.png"
          class="right-icon-bg"></image>
      </view>
      <view class="card-item">
        <view class="left-col">
          <image src="../../static/home_icon_order.png" class="icon"></image>
          <view class="title">总订单</view>
          <view class="num">{{ dateTotalInfo.totalOrderNum }}</view>
        </view>
        <image
          src="../../static/home_ipic_order.png"
          class="right-icon-bg"></image>
      </view>
    </view>

    <view class="statistics-view">
      <view class="item">
        <view class="name">今日收入</view>
        <view class="value">{{ dateTotalInfo.todaysIncome }}</view>
      </view>
      <view class="div-line" />
      <view class="item">
        <view class="name">今日订单</view>
        <view class="value">{{ dateTotalInfo.thatTimeOrderNum }}</view>
      </view>
      <view class="div-line" />
      <view class="item">
        <view class="name">退单总数</view>
        <view class="value">{{ dateTotalInfo.refund }}</view>
      </view>
    </view>

    <view class="card-view" @click="navToDetails()">
      <view class="title-view">
        <view class="left">
          <view class="title">待处理订单</view>
          <uni-badge :text="pendingOrderInfoTotal"></uni-badge>
        </view>
        <uni-icons type="right" color="rgba(186, 189, 196,0.6)"></uni-icons>
      </view>
      <view class="card-body order-card-body" v-if="!isPendingOrderInfoEmpty">
        <view class="info-row">
          <view class="title">联系人</view>
          <view class="right value">{{ pendingOrderInfo.contactName }}</view>
        </view>
        <view class="info-row">
          <view class="title">联系电话</view>
          <view class="right phone">{{ pendingOrderInfo.contactPhone }}</view>
        </view>
        <view class="info-row">
          <view class="title">服务项目</view>
          <view class="right value">{{ pendingOrderInfoServiceItem }}</view>
        </view>
        <view class="info-row">
          <view class="title">预约时间</view>
          <view class="right value">{{ pendingOrderInfo.orderTime }}</view>
        </view>
        <view class="info-row">
          <view class="title">上门地址</view>
          <view class="right value singe-line-ellipsis">
            {{ pendingOrderInfo.visitorAddress }}
          </view>
        </view>
        <view class="info-row">
          <view class="title">订单金额</view>
          <view class="right money">¥{{ pendingOrderInfo.orderAmount }}</view>
        </view>
        <view class="info-row">
          <view class="title">下单时间</view>
          <view class="right value">{{ pendingOrderInfo.createTime }}</view>
        </view>
      </view>
      <view class="card-body order-card-body" v-else>
        <view class="card-empty">暂无待处理订单</view>
      </view>
    </view>

    <view class="card-view">
      <view class="title-view">
        <view class="left">
          <view class="title">服务项目TOP5</view>
        </view>
        <uni-icons type="right" color="rgba(186, 189, 196,0.6)"></uni-icons>
      </view>
      <view class="card-body">
        <view style="width: 100%; margin-top: 20rpx">
          <canvas
            style="height: 400rpx; width: 100%"
            canvas-id="myid"
            id="myid" />
        </view>
      </view>
    </view>

    <view class="card-view" style="margin-bottom: 20rpx">
      <view class="title-view">
        <view class="left">
          <view class="title">护士排行</view>
        </view>
        <uni-icons type="right" color="rgba(186, 189, 196,0.6)"></uni-icons>
      </view>
      <view class="card-body ranking-of-nurses-card-body">
        <view class="tab-view">
          <view
            @click="tabClick(item, index)"
            class="tab-item"
            :class="rankingTabCurrent === index ? 'tab-item-selected' : ''"
            v-for="(item, index) in rankingTabList"
            :key="index">
            {{ item }}
          </view>
        </view>
        <view
          v-for="(item, index) in order"
          :key="index"
          class="item-row"
          v-if="rankingTabCurrent === 1">
          <view class="index" :class="index >= 3 ? 'last-index' : ''">
            {{ index + 1 }}
          </view>
          <image src="../../static/logo.png" class="avatar"></image>
          <view class="name">{{ item.value }}</view>
          <view class="value">{{ item.count }}</view>
        </view>

        <view
          v-for="(item, index) in rating"
          class="item-row"
          v-if="rankingTabCurrent === 0">
          <view class="index" :class="index >= 3 ? 'last-index' : ''">
            {{ index + 1 }}
          </view>
          <image src="../../static/logo.png" class="avatar"></image>
          <view class="name">{{ item.value }}</view>
          <view class="value">{{ item.count }}</view>
        </view>

        <view
          v-for="(item, index) in income"
          class="item-row"
          v-if="rankingTabCurrent === 2">
          <view class="index" :class="index >= 3 ? 'last-index' : ''">
            {{ index + 1 }}
          </view>
          <image src="../../static/logo.png" class="avatar"></image>
          <view class="name">{{ item.value }}</view>
          <view class="value">{{ item.count }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as loginUtils from "../../utils/loginUtils.js";
import uCharts from "../../components/u-charts/u-charts.js";
import * as homePage from "../../common/api/homePage.js";
import * as orderInfo from "../../common/api/orderInfo.js";
export default {
  data() {
    return {
      cWidth: 600,
      cHeight: 400,
      uChartsInstance: null,
      rankingTabList: ["好评率", "订单量", "营收额"],
      rankingTabCurrent: 1,
      dateTotalInfo: {},
      order: {},
      rating: {},
      income: {},
      pendingOrderInfo: {},
      pendingOrderInfoTotal: 0,
    };
  },
  onReady() {},
  mounted() {
    loginUtils.checkLogin();
    this.cWidth = uni.upx2px(600);
    this.cHeight = uni.upx2px(400);
    this.getServerData();
    this.hospitalDataReport();
    this.getPendingOrderInfo();
  },
  computed: {
    isPendingOrderInfoEmpty() {
      return this.pendingOrderInfoTotal === 0;
    },
    pendingOrderInfoServiceItem() {
      if (!this.pendingOrderInfo) {
        return "";
      }
      if (!this.pendingOrderInfo.itemInfos) {
        return "";
      }
      return this.pendingOrderInfo.itemInfos
        .map((e) => e.serviceItem)
        .join("/");
    },
  },
  methods: {
    getServerData() {
      setTimeout(() => {
        // const res = {
        // 	series: [{
        // 			name: '雾化吸入',
        // 			data: 20,
        // 		},
        // 		{
        // 			name: '心肺复苏指导',
        // 			data: 5
        // 		},
        // 		{
        // 			name: '胰岛素注射',
        // 			data: 0
        // 		},
        // 		{
        // 			name: '鼻饲管',
        // 			data: 10
        // 		},
        // 		{
        // 			name: '其他',
        // 			data: 3
        // 		}
        // 	]
        // };
        const dataJson = uni.getStorageSync("user_info") || "{}";
        const data = JSON.parse(dataJson) || {};
        const param = {
          hospitalId: data.hospitalUid,
        };
        homePage
          .hospitalTreeDiagram(param)
          .then((result) => {
            // this.dateTotalInfo = result.data.data
            this.drawCharts("myid", result.data.data);
          })
          .catch((error) => {
            console.log(error);
          });
        // this.drawCharts('myid', res);
      }, 500);
    },
    drawCharts(id, data) {
      console.log("data", data);
      const ctx = uni.createCanvasContext(id, this);
      this.uChartsInstance = new uCharts({
        type: "ring",
        context: ctx,
        width: this.cWidth,
        height: this.cHeight,
        series: data,
        legend: {
          show: true,
          position: "right",
          lineHeight: 30,
        },
        animation: true,
        padding: [0, 0, 0, 0],
        dataLabel: true,
        extra: {
          tooltip: {
            show: true,
          },
          ring: {
            labelWidth: -20,
          },
        },
      });
    },
    tabClick(item, index) {
      this.rankingTabCurrent = index;
    },
    hospitalDataReport() {
      const dataJson = uni.getStorageSync("user_info") || "{}";
      const data = JSON.parse(dataJson) || {};
      const param = {
        hospitalId: data.hospitalUid,
      };
      homePage
        .hospitalDataReport(param)
        .then((result) => {
          this.dateTotalInfo = result.data.data;
        })
        .catch((error) => {
          console.log(error);
        });

      homePage
        .hospitalTypeHospital(param)
        .then((result) => {
          console.log("当前订单", result.data.data.order);
          this.order = result.data.data.order;
          this.rating = result.data.data.rating;
          this.income = result.data.data.income;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getPendingOrderInfo() {
      const dataJson = uni.getStorageSync("user_info") || "{}";
      const data = JSON.parse(dataJson) || {};
      const param = {
        pageIndex: 1,
        pageSize: 1,
        hospitalUid: data.hospitalUid,
        statusList: ["待评估", "待派发"],
      };
      orderInfo
        .queryByPage(param)
        .then((result) => {
          const list = result.data.data.rows || [];
          this.pendingOrderInfoTotal = result.data.data.total;
          this.pendingOrderInfo = list[0] || {};
        })
        .catch((error) => {
          console.log(error);
        });
    },
    navToDetails() {
      if (this.isPendingOrderInfoEmpty) {
        return;
      }
      uni.navigateTo({
        url:
          "/pages/orderDetails/orderDetails?uid=" + this.pendingOrderInfo.uid,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-bar {
  height: 500rpx;
  background: linear-gradient(
    to left bottom,
    rgba(46, 176, 217, 1),
    rgba(86, 213, 253, 0)
  );
}

.tab-card {
  display: flex;
  margin-left: 20rpx;
  margin-right: 20rpx;
  margin-top: -300rpx;

  .card-item {
    width: 100%;
    height: 230rpx;
    background: white;
    border-radius: 28rpx;
    margin-left: 10rpx;
    margin-right: 10rpx;
    position: relative;

    .right-icon-bg {
      position: absolute;
      width: 148rpx;
      height: 148rpx;
      right: 10rpx;
      bottom: 5rpx;
    }

    .left-col {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      margin-left: 30rpx;
      z-index: 1;
      position: absolute;

      .icon {
        width: 48rpx;
        height: 48rpx;
      }

      .title {
        font-size: 26rpx;
        color: rgba(35, 35, 35, 0.5);
        margin-top: 5rpx;
      }

      .num {
        font-size: 48rpx;
        font-weight: bold;
        color: #232323;
      }
    }
  }
}

.statistics-view {
  margin-left: 30rpx;
  margin-right: 30rpx;
  display: flex;
  background: white;
  border-radius: 28rpx;
  margin-top: 24rpx;
  padding: 30rpx;
  box-sizing: border-box;
  height: 154rpx;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .name {
      color: rgba(35, 35, 35, 0.5);
      font-size: 26rpx;
    }

    .value {
      font-size: 34rpx;
      color: rgba(35, 35, 35, 0.9);
      font-weight: bold;
    }
  }

  .div-line {
    height: 100%;
    width: 2rpx;
    background: #ebebeb;
  }
}

.card-view {
  margin-left: 30rpx;
  margin-right: 30rpx;
  background: white;
  border-radius: 24rpx;
  padding: 30rpx;
  box-sizing: border-box;
  margin-top: 24rpx;

  .title-view {
    display: flex;
    align-items: center;

    .left {
      flex: 1;
      display: flex;
      align-items: center;

      .title {
        font-size: 34rpx;
        color: #000;
        font-weight: bold;
      }
    }
  }

  .card-body {
  }
}

.card-empty {
  width: 100%;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #232323;
}

.order-card-body {
  display: flex;
  flex-direction: column;
  margin-top: 10rpx;

  .info-row {
    display: flex;
    min-height: 60rpx;
    align-items: center;
    justify-content: center;

    .title {
      width: 150rpx;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .right {
      flex: 1;
    }

    .value {
      font-size: 26rpx;
      color: #232323;
    }

    .phone {
      color: #2eb0d9;
      font-size: 30rpx;
    }

    .money {
      color: #ee5a2c;
      font-size: 30rpx;
      font-weight: bold;
    }
  }
}

.ranking-of-nurses-card-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;

  .tab-view {
    width: 100%;
    height: 64rpx;
    background: #f8f8f8;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    padding: 4rpx;
    box-sizing: border-box;

    .tab-item {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(35, 35, 35, 0.5);
      font-size: 26rpx;
      border-radius: 40rpx;
      font-weight: bold;
    }

    .tab-item-selected {
      background: #ffffff;
      color: #2eb0d9;
    }
  }

  .item-row {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 40rpx;

    .index {
      color: #f5803d;
      font-size: 40rpx;
      font-weight: bold;
    }

    .last-index {
      color: #232323;
    }

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-left: 30rpx;
    }

    .name {
      color: #232323;
      font-size: 30rpx;
      font-weight: bold;
      flex: 1;
      margin-left: 24rpx;
    }

    .value {
      color: #232323;
      font-weight: bold;
      font-size: 32rpx;
    }
  }
}
</style>
